
<template>
  <div>
    <a-row style="min-height:1080px">
      <a-col :span="24" class="justCont" style="background-color: #333;padding:0">
        <a-row :gutter="16">
          <a-col :span="6" v-for="(item,index) in dataFile" :key="index">
            <div class="gutter-box">
              <HlsVideo :src="item.path" style="width:390px;height:290px"></HlsVideo>
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import HlsVideo from '@/components/_Hlsvideo/Hlsvideo'
export default {
  name: 'TableList',
  components: {
    HlsVideo,
  },
  data() {
    return {
      dataFile: [
        {
          path: 'http://192.168.12.88:8088/rtsp/0F5B6FBB/hls.m3u8',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/EA88E054/hls.m3u8',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/4A3F73F4/hls.m3u8',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/DE677A33/hls.m3u8',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/EA287F51/hls.m3u8',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/B6F970F7/hls.m3u8',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/82B67595/hls.m3u8',
        },

        {
          path: '	http://192.168.12.88:8088/rtp/35BB2701/hls.m3u8',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/0F5B6FBB/hls.m3u8',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/EA88E054/hls.m3u8',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/4A3F73F4/hls.m3u8',
        },
        {
          path: 'http://192.168.12.88:8088/rtsp/DE677A33/hls.m3u8',
        },
      ],
      current: 0,
    }
  },
  created() {
    let videoBox = document.getElementById('m3u8Video')
    const m3u8TempUrl = 'http://221.237.179.20:17086/live/cameraid/1000002$114/substream/1.m3u8'
    let hls = new Hls()
    hls.loadSource(m3u8TempUrl)
    hls.attachMedia(videoBox)
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      videoBox.play()
    })
  },
  methods: {},
}
</script>
<style lang="less" >
.justCont {
  .gutter-box {
    min-height: 220px;
    border: 1px solid rgba(228, 228, 228, 1);
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    cursor: pointer;
  }
  .ant-col-6 {
    margin-top: 20px;
  }
}
</style>

